<<<<<<< HEAD
import React, { useState } from "react";
=======
import React, { useState, useEffect } from "react";
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
import {
  View,
  Text,
  TextInput,
  StyleSheet,
<<<<<<< HEAD
  TouchableOpacity,
  Keyboard
} from "react-native";
import { colors } from "../Style/Colors";
import SearchList from "../Components/SearchList";
=======
  TouchableOpacity
} from "react-native";
import { colors } from "../Style/Colors";
import SearchList from "../Compoents/SearchList";
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05

const Search = props => {
  const [searchText, setSearchText] = useState("");
  const [searchNumber, setSearchNumber] = useState("");
  const [isSearchEntered, setIsSearchEntered] = useState(false);
<<<<<<< HEAD
  const [showMessage, setShowMessage] = useState(false);
  const [message, setMessage] = useState("");
=======
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05

  const onChangeSearchText = searchText => {
    setSearchText(searchText);
  };
  const onChangeSearchNumber = searchNumber => {
    setSearchNumber(searchNumber);
  };
<<<<<<< HEAD

  const onSearchClick = () => {
    Keyboard.dismiss();
    requestAnimationFrame(() => {
      setShowMessage(false);
      if (searchText || searchNumber) {
        setIsSearchEntered(!isSearchEntered);
      } else if (!searchText || !searchNumber) {
        setShowMessage(true);
        setMessage("Name or REG/IPD No. should not be empty");
      }
    });
  };

  // const onRefresh = () => {
  //   // setRefreshing[true];
  //   // setIsLoading[true];
  //   // getData();
  //   // setRefreshing[false];
  //   // setIsLoading[false];
  // };

=======
  const onSearchClick = () => {
    setIsSearchEntered(true);
  };

>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
  return (
    <View style={styles.container}>
      <View style={styles.textInputWrapper}>
        <TextInput
          placeholder="Enter Name"
          style={styles.textInput}
          onChangeText={searchText => onChangeSearchText(searchText)}
          value={searchText}
        />
      </View>
      <Text style={styles.orText}>OR</Text>
      <View style={styles.textInputWrapper}>
        <TextInput
          keyboardType="number-pad"
          placeholder="Enter REG / IPD No"
          style={styles.textInput}
          onChangeText={searchNumber => onChangeSearchNumber(searchNumber)}
          value={searchNumber}
        />
      </View>
<<<<<<< HEAD
      <TouchableOpacity
        activeOpacity={0.8}
        style={styles.buttonWrapper}
        onPress={onSearchClick}
      >
        <Text style={styles.text}>SEARCH</Text>
      </TouchableOpacity>

      {isSearchEntered && (
        <SearchList param={searchText !== "" ? searchText : searchNumber} />
      )}

      {showMessage && (
        <View
          style={{
            alignItems: "center",
            marginTop: 10
          }}
        >
          <Text style={{ color: "red", fontSize: 16 }}>{message}</Text>
        </View>
=======
      <TouchableOpacity style={styles.buttonWrapper} onPress={onSearchClick}>
        <Text style={styles.text}>SEARCH</Text>
      </TouchableOpacity>
      {isSearchEntered ? (
        <SearchList param={searchText !== "" ? searchText : searchNumber} />
      ) : (
        <Text>Tap on Search button display search result</Text>
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  textInputWrapper: {
    padding: 10
  },
  textInput: {
    borderWidth: 0.3,
    borderColor: "grey",
    fontSize: 16,
    padding: 8
  },
  orText: {
    fontSize: 18,
    textAlign: "center",
    fontWeight: "bold"
  },
  buttonWrapper: {
    padding: 10,
    backgroundColor: colors.primaryColor,
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 10,
    marginVertical: 4
  },
  text: {
    color: colors.whiteColor,
    fontSize: 16
  }
});

export default Search;
